<!--
 * @Description: 模拟协同云跳转页 
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 14:03:32
 * @LastEditors: 黄勇
 -->
<template>
    <div class="login">
        <div class="user" 
        v-for="(user,index) in userList" 
        :key="index" 
        @click="clickUser(user)">
        <p :title="user.cloudMemberName">{{user.cloudMemberName}}</p>
        <!-- <p>{{user.v5LoginName}}</p>
        <p>{{user.memberName}}</p> -->
        </div>
    </div>
</template>

<script>

import {
    createNamespacedHelpers
} from "vuex";
import axios from "axios"

const {
    mapState,
    mapMutations,
    mapActions
} = createNamespacedHelpers("user");

export default {
    name: "login",
    components: {
    },
    computed: {},
    data: () => ({
        userList: []
    }),
    created() {
        this.getUserList();
    },
    mounted() {},
    watch: {
    },
    methods: {
         ...mapMutations([
            "SET_USERINFO"
        ]),
        getUserList() {
            this.api.getUserList({},{method: "get", customRequest: true})
            .then(res => {
                this.userList = res.data;
            })
            .catch(err => {
               console.warn(err.msg)
            });
        },
        clickUser(user) {
            let name = user.v5LoginName;
            this.mockLogin(name);
        },
         mockLogin(loginName) {
            this.api.mockLogin({
                 params: {
                     loginName: loginName
                    }             
                }, {method: "get", customRequest: true})
            .then(res => {
                this.getUserInfo();
            })
            .catch(err => {
               console.warn(err.msg)
            });
        },
        getUserInfo() {
            this.api.getUserInfo({}, {method: "get", customRequest: true})
            .then(res => {
                this.SET_USERINFO(res.data);
                this.redirectToCloudDesignCenter();
                //2020-3-31 每次打开v5页面再起单点登录
                // let data = res.data;
                // let ssoPrefix = data.ssoPrefix;
                // axios.get(ssoPrefix.ssoPrefix).then(res => {
                //     this.redirectToCloudDesignCenter();
                // })
            })
            .catch(err => {
               console.warn(err.msg)
            });
        },
        redirectToCloudDesignCenter(user) {
            this.$router.push({
                path: "/main",
                query: {}
            })
        }
    }
};
</script>

<style lang="scss">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 60px;
    padding-left: 80px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    .user {
        flex: 0 0 200px;
        width: 200px;
        height: 60px;
        margin-top: 20px;
        margin-right: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 20px;
    

    cursor: pointer;
    &:hover {
        border-color: #336CFB;
    }
    &>p {
        width: 100%;
        text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    &:first-child{
        font-size: 20px;
    }
    }
    }
    
}
</style>